<template>
    <div class="home">
         <ul class="ha">
           <li>首页</li>
           <li>优惠券</li>
           <li>钱包</li>
           <li>
             客户服务
             <section class="aa">
               <p>消费者服务</p>
               <p>商家服务</p>
               <p>规则中心</p>
             </section>
           </li>
           <li>
             商家后台
             <section class="zz">
               <p>管理后台</p>
               <p>商家社区</p>
               <p>商家培训</p>
               <p>市场入驻</p>
             </section>
           </li>
         </ul>
      <section class="qq">
        <p class="el-icon-upload2" @click="backTop()"></p>
      </section>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {

            }
        },
      methods:{
        backTop(){
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
      },
    }
</script>

<style scoped>
  .home{
    position: fixed;
    /*position: absolute;*/
    top:0px;
    right: 0px;
    /*float: right;*/
    width: 30px;
    height: 100vh;
    background: #202020;
    color: #fff;
    font-size: 12px;

  }
  .ha{
    /*width: 12px;*/
    margin-top: 100px;

  }
  .ha li{
    /*background: gray;*/
    padding:10px;
    border-bottom: solid 1px #000;
    cursor: pointer;
  }
  .ha li:hover{
    background: paleturquoise;
  }
  .ha li:hover section{
    display: block;
  }
  .ha li section {
    position: absolute;
    background:rgba(0,0,0,0.8) ;
    /*width: 120px;*/
    display: none;
  }
  .ha li .aa{
    left:-100px;
    top:280px;
  }
  .ha li .zz{
    left:-88px;
    top:370px;
  }
  .ha li section p{
    margin: 5px 20px;
    height: 20px;
  }
  .ha li section p:hover{
    border-bottom: solid 1px #fff;
  }
  .ha li section p:first-child{
    margin-top: 15px;
  }
  .ha li section p:last-child{
    margin-bottom: 15px;
  }
  .home .qq p{
    /*display: inline-block;*/
    /*width: 20px;*/
    /*height: 30px;*/

    /*margin: 0 auto;*/
    text-align: center;
    font-size: 20px;
    padding:5px;
    margin-top:400px;
  }
  .home .qq p:hover{
    background: orange;
  }
</style>
